<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Tabs from "./Tabs.svelte";
    import { fn } from "storybook/test";
    import Icon from "@iconify/svelte";
    import { Button } from "../Button";
    import Space from "../Space/Space.svelte";
    import TabPane from "./TabPane.svelte";
    import { writable } from "svelte/store";
    import type { TabsProps } from "./Tabs";
    import { Link } from "../Typography";
    import { DropdownItem, DropdownMenu } from "../Dropdown";

    const { Story } = defineMeta({
        title: "Components/Navigation/Tabs",
        component: Tabs,
        subcomponents: {
            TabPane,
        },
        tags: ["autodocs"],
        argTypes: {
            activeName: {
                description: "双向绑定属性",
            },
        },
        args: {},
    });
    let type = $state<TabsProps["type"]>("line");

    let num = 1;
    let data = $state([
        {
            title: `标签一`,
            name: `tab1`,
            context: "标签一内容",
        },
    ]);
    const addTab = () => {
        data.push({
            title: `Title_${++num}`,
            name: `tab_${num}`,
            context: "新增tab内容",
        });
    };
    const removeTab = () => {
        data.splice(data.length - 1, 1);
    };
</script>

<Story name="Default">
    {#snippet template(args)}
        <Tabs activeName="tab1">
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="Disabled">
    {#snippet template(args)}
        <Tabs activeName="tab1">
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" disabled name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="Center" args={{ centered: true }}>
    {#snippet template(args)}
        <Tabs activeName="tab1" {...args}>
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="Bordered" args={{ bordered: true }}>
    {#snippet template(args)}
        <Tabs activeName="tab1" {...args}>
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="Duration" args={{ duration: 200 }}>
    {#snippet template(args)}
        <Tabs activeName="tab1" {...args}>
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="Icon">
    {#snippet template(args)}
        {#snippet icon1()}
            <Icon icon="f7:shippingbox" />
        {/snippet}
        {#snippet icon2()}
            <Icon icon="f7:command" />
        {/snippet}
        {#snippet icon3()}
            <Icon icon="f7:helm" />
        {/snippet}
        <Tabs activeName="tab1">
            <TabPane title="标签一" name="tab1" icon={icon1}>标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2" icon={icon2}>标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3" icon={icon3}>标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="KeepHeight">
    {#snippet template(args)}
        {#snippet icon1()}
            <Icon icon="f7:shippingbox" />
        {/snippet}
        {#snippet icon2()}
            <Icon icon="f7:command" />
        {/snippet}
        {#snippet icon3()}
            <Icon icon="f7:helm" />
        {/snippet}
        <Tabs activeName="tab1" keepHeight>
            <TabPane title="标签一" name="tab1" icon={icon1}>
                <p>标签一的内容</p>
                <p>标签一的内容</p>
                <p>标签一的内容</p>
            </TabPane>
            <TabPane title="标签二" name="tab2" icon={icon2}>标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3" icon={icon3}>标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="Types">
    {#snippet template(args)}
        <label>
            <input type="radio" value="line" bind:group={type} />Line
        </label>
        <label>
            <input type="radio" value="card" bind:group={type} />Card
        </label>
        <label>
            <input type="radio" value="button" bind:group={type} />Button
        </label>
        <Tabs activeName="tab1" {type}>
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="Extra">
    {#snippet template(args)}
        <Tabs activeName="tab1">
            {#snippet prepend()}
                <Button size="small">prepend extra</Button>
            {/snippet}
            {#snippet append()}
                <Link>More</Link>
            {/snippet}
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="Dynamic">
    {#snippet template(args)}
        <Tabs activeName="tab1" type="card">
            {#snippet append()}
                <Space>
                    <Link onclick={addTab}>Add</Link>
                    <Link onclick={removeTab}>Remove</Link>
                </Space>
            {/snippet}
            {#each data as item}
                <TabPane title={item.title} closeable name={item.name}>{item.context}</TabPane>
            {/each}
        </Tabs>
    {/snippet}
</Story>

<Story name="Align">
    {#snippet template(args)}
        <label>
            <input type="radio" value="line" bind:group={type} />Line
        </label>
        <label>
            <input type="radio" value="card" bind:group={type} />Card
        </label>
        <label>
            <input type="radio" value="button" bind:group={type} />Button
        </label>
        <Tabs activeName="tab1" align="top" bordered {type}>
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>

        <Tabs activeName="tab1" align="left" bordered {type}>
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
        <Tabs activeName="tab1" align="right" bordered {type}>
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
        <Tabs activeName="tab1" align="bottom" bordered {type}>
            <TabPane title="标签一" name="tab1">标签一的内容</TabPane>
            <TabPane title="标签二" name="tab2">标签二的内容</TabPane>
            <TabPane title="标签三" name="tab3">标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="ArrowPosition" args={{ arrowPosition: "both" }}>
    {#snippet template(args)}
        {@const data = new Array(15).fill(1).map((_, index) => ({
            title: `标签${index}`,
            name: `tab${index}`,
            context: "标签内容",
        }))}
        <Tabs activeName="tab0" align="top" more {...args}>
            {#each data as item}
                <TabPane title={item.title} name={item.name}>{item.context}</TabPane>
            {/each}
        </Tabs>
    {/snippet}
</Story>

<Story name="ShowMore">
    {#snippet template(args)}
        {@const data = new Array(15).fill(1).map((_, index) => ({
            title: `标签${index}`,
            name: `tab${index}`,
            context: "标签内容",
        }))}
        {#snippet renderTabs()}
            {#each data as item}
                <TabPane title={item.title} name={item.name}>{item.context}</TabPane>
            {/each}
        {/snippet}
        <Space dir="v" size={24} style="width: 500px;">
            <Tabs activeName="tab0" align="top" more>
                {@render renderTabs()}
            </Tabs>

            <div>moreDropdownProps</div>

            <Tabs
                activeName="tab0"
                align="top"
                more
                moreDropdownProps={{
                    arrow: true,
                    trigger: "click",
                }}
            >
                {@render renderTabs()}
            </Tabs>

            <div>renderMore自定义更多元素</div>

            <Tabs activeName="tab0" align="top" more>
                {#snippet renderMore()}
                    <Button>显示更多</Button>
                {/snippet}
                {@render renderTabs()}
            </Tabs>
        </Space>
    {/snippet}
</Story>

<Story name="MaxTabSize">
    {#snippet template(args)}
        <Tabs activeName="tab1" maxTabSize={90} type="button" buttonTheme="outline" tooltip>
            <TabPane title="这是一个超长标题" name="tab1">标签一的内容</TabPane>
            <TabPane title="这是一个超长标题" name="tab2">标签二的内容</TabPane>
            <TabPane title="这是一个超长标题" name="tab3">标签三的内容</TabPane>
        </Tabs>
    {/snippet}
</Story>

<Story name="ContextMenu">
    {#snippet template(args)}
        <Tabs
            activeName="tab1"
            maxTabSize={90}
            type="button"
            buttonTheme="outline"
            dropdownProps={{
                arrow: true,
            }}
            oncontextmenu={(item) => {
                console.log("onContextMenu", item);
            }}
            onselectcontextmenu={(name, item) => {
                console.log(name, item, "onSelectContextMenu");
            }}
        >
            {#snippet contextMenu()}
                <DropdownMenu>
                    <DropdownItem name="menu1" data={{ id: 1, name: "menu1" }}>选项1</DropdownItem>
                    <DropdownItem name="menu2">选项2</DropdownItem>
                </DropdownMenu>
            {/snippet}
            <TabPane title="产品名称" name="tab1"></TabPane>
            <TabPane title="产品详情" name="tab2"></TabPane>
            <TabPane title="新增产品" name="tab3"></TabPane>
        </Tabs>
    {/snippet}
</Story>
